<template>
  <el-drawer :model-value="visible" :title="title" size="30%" append-to-body lock-scroll @close="handleClose">
    <section v-if="isPublic">
      <el-input v-model="search" placeholder="请搜索"></el-input>
      <TaiTitle title="已关联：" class="mb20 mt20">
        <template #append>
          <el-button>去关联</el-button>
        </template>
      </TaiTitle>
    </section>
    <section style="height: calc(100% - 200px);overflow-y: auto;" ref="listRef">
      <template v-if="data.length > 0">
        <div class="primary-section pv-12" v-for="(item, index) in data" :key="index">
          <div>{{ item.roomName }}</div>
          <el-icon color="var(--el-color-danger)" style="cursor: pointer;" @click="removeDevice(item)"><Remove /></el-icon>
        </div>
      </template>
      <el-empty v-else />
    </section>
    <pagination
      v-show="total > 0"
      :total="total"
      :small="true"
      layout="prev, pager, next"
      v-model:page="currentPage"
      v-model:limit="pageSize"
      @pagination="handlePagination"
    />
  </el-drawer>
</template>
<script setup name="AssociationRoomDrawer">
import { scrollTo } from '@/utils/scroll-to'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  title: {
    type: String,
    default: '关联房间'
  },
  deviceType: {
    type: Number
  },
  isPublic: {
    type: Boolean
  },
  total: {
    type: Number
  },
  visible: {
    type: Boolean,
    defalut: false
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 20
  },
})

defineExpose({
  show
})

const search = ref('')
// const visible = ref(false)
const list = ref([])

const currentPage = computed({
  get() {
    return props.page
  },
  set(val) {
    emit('update:page', val)
  }
})
const pageSize = computed({
  get() {
    return props.limit
  },
  set(val){
    emit('update:limit', val)
  }
})
function handlePagination() {
  emit('pagination', { page: currentPage.value, limit: pageSize.value })
  proxy.$refs['listRef'].scrollTop = 0
}

/* 解绑设备 */
function removeDevice(row) {
  emit('unbind', row)
}

/* 关闭窗口 */
function handleClose() {
  emit('cancel')
}

function getList() {
  console.log(props.deviceType);
  console.log('调用接口：>>>>');
}

function show() {
  visible.value = true
}
</script>
<style lang="scss" scoped>
.primary-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>